<template>
  <div class="adress">
    <adress-header ref="adressHeader"></adress-header>
    <!-- 占位 -->
    <div style="width: 100%; height: 1.226667rem"></div>
    <div
      ref="wordb"
      class="words-bar"
      @touchstart="touchStart"
      @touchmove.prevent="touchMove($event)"
      @touchend="touchEnd"
    >
      <div
        v-for="(item, index) in words"
        :key="index"
        class="word-item"
        @click="toScroll(index)"
      >
        {{ item }}
      </div>
    </div>
    <scroll
      :sHeight="sHeight + ''"
      class="myscroll"
      :data="allCity"
      ref="myscroll"
    >
      <div class="adress-content">
        <div class="adress-current">
          <div class="current-title">
            <span>当前定位城市：</span>
            <span style="color: #999">定位不准时在列表中选择</span>
          </div>
          <router-link :to="'/city/' + currentCity.id">
            <div class="current-btn">{{ currentCity.name || "手动定位" }}</div>
          </router-link>
        </div>
        <div class="adress-hot">
          <div class="hot-title">
            <span>热门城市</span>
          </div>
          <div class="hot-content">
            <router-link
              v-for="(item, index) in hotCity"
              :key="index"
              :to="'/city/' + item.id"
              class="hot-item"
            >
              {{ item.name }}
            </router-link>
          </div>
        </div>
        <div class="adress-list" ref="adressList">
          <div v-for="(item, index) in allCity" :key="index">
            <div class="adress-title" :ref="words[index]">
              {{ words[index] }}
            </div>
            <ul class="adress-list-content">
              <li class="adress-item" v-for="(v, k) in item" :key="k">
                <router-link :to="'/city/' + v.id" class="item-content">{{
                  v.name
                }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </scroll>
  </div>
</template>

<script>
import adressHeader from "../components/adress/adressHeader";
import scroll from "../components/common/scroll";
import { getCityList } from "../api/api";
export default {
  data() {
    return {
      sHeight: 0,
      //当前城市
      currentCity: {},
      //热门城市
      hotCity: [],
      //所有城市
      allCity: [],
      //字母表
      words: [],
      //是否触摸开始
      flag: false,
    };
  },
  components: {
    adressHeader,
    scroll,
  },
  created() {
    //获取当前的城市
    getCityList({ type: "guess" })
      .then((res) => {
        this.currentCity = res;
      })
      .catch((error) => {
        console.log(error);
      });
    getCityList({ type: "hot" })
      .then((res) => {
        this.hotCity = res;
      })
      .catch((error) => {
        console.log(error);
      });
    getCityList({ type: "group" })
      .then((res) => {
        let arr = Object.keys(res).sort();
        this.words = arr;
        for (let i = 0; i < arr.length; i++) {
          this.$set(this.allCity, i, res[arr[i]]);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },
  mounted() {
    this.sHeight =
      document.body.offsetHeight -
      this.$refs.adressHeader._vnode.elm.offsetHeight;
  },
  methods: {
    touchEnd() {
      this.flag = false;
    },
    touchStart() {
      this.flag = true;
    },
    touchMove($event) {
      if (this.flag) {
        this.$nextTick(() => {
          //节流
          let timer;
          timer = setTimeout(() => {
            clearTimeout(timer);
            //获取在当前侧边栏滑动的距离
            let y = $event.touches[0].clientY - this.$refs.wordb.offsetTop;
            //获取每个元素的高
            let nodeY = this.$refs.wordb.children[0].offsetHeight;
            //看滑动的距离等于几个元素的高  向上取整
            let index = Math.floor(y / nodeY);
            if (index > this.words.length - 1) {
              index = this.words.length - 1;
            }
            if (index < 0) {
              index = 0;
            }
            //得到了index,通过scroll滚动到对应的element
            this.$refs.myscroll.scrollToElement(
              this.$refs[this.words[index]][0],
              500
            );
          }, 20);
        });
      }
    },
    toScroll(index) {
      this.$nextTick(() => {
        this.$refs.myscroll.scrollToElement(
          this.$refs[this.words[index]][0],
          500
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.adress {
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;
  .words-bar {
    width: 0.266667rem;
    padding: 0 0.133333rem;
    display: flex;
    flex-direction: column;
    background-color: rgba($color: #d3edff, $alpha: 0.6);
    border-radius: 0.266667rem;
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 99;
    transition: all 0.3s;
    .word-item {
      padding: 0.066667rem 0;
      text-align: center;
      color: #999;
      font-size: 0.32rem;
    }
  }
  .myscroll {
    width: 100%;
    height: 100%;
    .adress-content {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      .adress-current {
        width: 100%;
        background-color: #fff;
        .current-title {
          width: 100%;
          height: 0.88rem;
          font-size: 0.346667rem;
          color: #333;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.32rem;
          box-sizing: border-box;
        }
        .current-btn {
          width: 100%;
          height: 1rem;
          line-height: 1rem;
          font-size: 0.426667rem;
          color: #50b8fd;
          padding: 0 0.32rem;
          box-sizing: border-box;
          background: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1px solid #f5f5f5;
          &::after {
            content: ">";
            color: #777777;
          }
        }
      }
      .adress-hot {
        width: 100%;
        margin-top: 0.266667rem;
        background-color: #fff;
        .hot-title {
          height: 0.96rem;
          line-height: 0.96rem;
          font-size: 0.373333rem;
          padding: 0 0.32rem;
        }
        .hot-content {
          display: flex;
          flex-wrap: wrap;
          .hot-item {
            width: 25%;
            height: 1.066667rem;
            line-height: 1.066667rem;
            box-sizing: border-box;
            font-size: 0.373333rem;
            color: #50b8fd;
            text-align: center;
            border-top: 1px solid #f5f5f5;
            border-right: 1px solid #f5f5f5;
            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .adress-list {
        width: 100%;
        margin-top: 0.266667rem;
        .adress-title {
          width: 100%;
          height: 0.8rem;
          background-color: #d3edff;
          font-size: 0.373333rem;
          line-height: 0.8rem;
          box-sizing: border-box;
          padding: 0 0.32rem;
          border-bottom: 1px solid #f5f5f5;
        }
        .adress-list-content {
          .adress-item {
            background-color: #fff;
            height: 0.8rem;
            line-height: 0.8rem;
            border-bottom: 1px solid #f5f5f5;
            padding: 0 0.6rem;
            font-size: 0.373333rem;
            .item-content {
              color: #333;
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>